@using AntDesign.Charts
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient

<Tabs>
    <TabPane Key="1">
        <Tab>示例1</Tab>
        <ChildContent>
            <Treemap Data="data1" Config="config1" />
        </ChildContent>
    </TabPane>

    @*<TabPane Key="2">
        <Tab>示例2</Tab>
        <ChildContent>
            <Treemap Data="data2" Config="config2" />
        </ChildContent>
    </TabPane>

    <TabPane Key="3">
        <Tab>示例3</Tab>
        <ChildContent>
            <Treemap Data="data3" Config="config3" />
        </ChildContent>
    </TabPane>*@
</Tabs>

@code{

    BasementProdItem[] data2;
    BasementProdItem[] data3;

    protected override async Task OnInitializedAsync()
    {
        data2 = await ChartsDemoData.BasementProdAsync(NavigationManager, HttpClient);
        data3 = await ChartsDemoData.BasementProdAsync(NavigationManager, HttpClient);

        await base.OnInitializedAsync();
    }

    #region 示例1

    readonly Data data1 = new Data
    {
        Name = "root",
        Children = new List<TreemapDataItem>
    {
            new TreemapDataItem {Name = "分类 1", Value = 560},
            new TreemapDataItem {Name = "分类 2", Value = 500},
            new TreemapDataItem {Name = "分类 3", Value = 150},
            new TreemapDataItem {Name = "分类 4", Value = 140},
            new TreemapDataItem {Name = "分类 5", Value = 115},
            new TreemapDataItem {Name = "分类 6", Value = 95},
            new TreemapDataItem {Name = "分类 7", Value = 90},
            new TreemapDataItem {Name = "分类 8", Value = 75},
            new TreemapDataItem {Name = "分类 9", Value = 98},
            new TreemapDataItem {Name = "分类 10", Value = 60},
            new TreemapDataItem {Name = "分类 11", Value = 45},
            new TreemapDataItem {Name = "分类 12", Value = 40},
            new TreemapDataItem {Name = "分类 13", Value = 40},
            new TreemapDataItem {Name = "分类 14", Value = 35},
            new TreemapDataItem {Name = "分类 15", Value = 40},
            new TreemapDataItem {Name = "分类 16", Value = 40},
            new TreemapDataItem {Name = "分类 17", Value = 40},
            new TreemapDataItem {Name = "分类 18", Value = 30},
            new TreemapDataItem {Name = "分类 19", Value = 28},
            new TreemapDataItem {Name = "分类 20", Value = 16}
        },
        Value = 2237
    };

    readonly TreemapConfig config1 = new TreemapConfig
    {
        ColorField = "name"
    };

    #endregion 示例1

    #region 示例2


    readonly TreemapConfig config2 = new TreemapConfig
    {
        ColorField = "brand"
    };

    #endregion 示例2

    #region 示例3


    readonly TreemapConfig config3 = new TreemapConfig
    {

        ColorField = "name",
        Interactions = new Interaction[]
        {
            new Interaction
            {
                  Type =  "drilldown",
                  Cfg =  new
                  {
                        mapping =  new
                        {
                              //1 =  new
                              //{
                              //  field =  "name",
                              //},
                              //2 = new
                              //{
                              //      field =  "name",
                              //      values =  ["#f5bc32", "#e66557", "#71c8ea", "#9362b7", "#fd984f", "#279493", "#fd9bc3"],
                              // },
                              // 3 = new
                              // {
                              //      field =  "value",
                              //      //values =  (parent) => {
                              //      //  return ["#ffffff", parent.color];
                              //      //},
                              // },
                        },
                  },
            }
        }
    };

    #endregion 示例3

    public class Data : ITreemapData<TreemapDataItem>
    {
        public string Name { get; set; }
        public IEnumerable<TreemapDataItem> Children { get; set; }
        public int Value { get; set; }
    }

    public class TreemapDataItem
    {
        public string Name { get; set; }
        public decimal Value { get; set; }
    }

}